<template>
  <div class="goods-detail">
    <!-- 属性描述 -->
    <ul class="attrs">
      <li v-for="item in goods.details.properties" :key="item.id">
        <span class="dt">{{item.name}}</span>
        <span class="dd">{{item.value}}</span>
      </li>
    </ul>
    <!-- 图片 -->
    <img v-for="item in goods.details.pictures" :key="item" :src="item">
  </div>
</template>

<script>
import { inject } from '@vue/runtime-core'
export default {
  name: 'GoodsDetail',
  setup () {
    const goods = inject('goods')
    // console.log(goods)
    return { goods }
  }
}
</script>

<style lang="less" scoped>
.goods-detail{
  padding:40px;
  .attrs{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    li{
      display: flex;
      margin-bottom: 10px;
      width: 50%;
      line-height: 25px;
      .dt{
        width: 100px;
        color:#999;
      }
      .dd{
        flex: 1;
        color: #666;
        margin-right: 25px;
      }
    }
  }
  >img{
    width: 100%;
  }
}
</style>
